<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
        <link rel="stylesheet" href="../assets/css/app.css" />
        <link rel="stylesheet" href="../assets/css/com.css" />
        <link rel="stylesheet" href="../assets/css/index/user.css" />
        <script src="../assets/js/jquery.min.js"></script>
        <script src="../assets/js/amazeui.min.js"></script>
        <script src="../assets/js/echarts-all-3.js"></script>
    </head>
    <body>
    <div class="am-g tpl-g">
        <div class="tpl-content-wrapper">
            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div id="page-title" class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 动态折线图</div>
                    </div>
                </div>
            </div>
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">动态折线图</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                <div style="width: 600px;height:400px;" class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="move-echarts"></div>
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">动态饼图</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                 <div style="height:600px;width: 600px;" class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="move-echartsa"></div>
            </div>
        </div>
    </div>

    <script>
    // function randomData() {
    //     now = new Date(+now + oneDay);
    //     value = value + Math.random() * 21 - 10;
    //     return {
    //         name: now.toString(),
    //         value: [
    //             [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
    //             Math.round(value)
    //         ]
    //     }
    // }

    // var data = [];
    // var now = +new Date(2017, 0, 0);
    // var oneDay = 24 * 3600 * 1000;
    // var value = Math.random() * 1000;
    // for (var i = 0; i < 1000; i++) {
    //     data.push(randomData());
    // }

    // console.log(data);

    // // 基于准备好的dom，初始化echarts图表
    // var myChart = echarts.init(document.getElementById('move-echarts')); 
    
    // var option = {
    //     title : {
    //     text: '动态数据',
    //     subtext: '纯属虚构'
    // },
    // tooltip : {
    //     trigger: 'axis'
    // },
    // legend: {
    //     data:['最新成交价','成本价']
    // },
    // toolbox: {
    //     show : true,
    //     feature : {
    //         mark : {show: true},
    //         dataView : {show: true, readOnly: false},
    //         magicType : {show: true, type: ['line', 'bar']},
    //         restore : {show: true},
    //         saveAsImage : {show: true}
    //     }
    // },
    // dataZoom : {
    //     show : false,
    //     start : 0,
    //     end : 100
    // },
    // xAxis : [
    //     {
    //         type : 'category',
    //         boundaryGap : true,
    //         data : (function (){
    //             var now = new Date();
    //             var res = [];
    //             var len = 1000;
    //             while (len--) {
    //                 res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
    //                 now = new Date(now - 2000);
    //             }
    //             return res;
    //         })()
    //     },
    // ],
    // yAxis : [
    //     {
    //         type : 'value',
    //         scale: true,
    //         name : '价格',
    //         // boundaryGap: [0.2, 0.2]
    //         min:0,
    //         max:50
    //     },
    // ],
    // series : [
    //     {
    //         name:'最新成交价',
    //         type:'line',
    //         data:(function (){
    //             var res = [];
    //             var len = 1000;
    //             while (len--) {
    //                 res.push(11 + Math.random() * ((Math.round(Math.random() * 100) % 2) == 0 ? 1 : -1));
    //             }
    //             return res;
    //         })()
    //     },
    //     {
    //         name:'成本价',
    //         type:'line',
    //         data:(function (){
    //             var res = [];
    //             var len = 1000;
    //             while (len--) {
    //                 res.push((Math.random()*1 + 2).toFixed(1) - 0);
    //             }
    //             return res;
    //         })()
    //     }
    // ]
    // };

    // // 为echarts对象加载数据 
    // myChart.setOption(option); 
    
    // var lastData = 11;
    // var secondData = 9;
    // var axisData;
    // clearInterval(timeTicket);

    // var timeTicket = setInterval(function(){
    //     lastData += Math.random() * ((Math.round(Math.random() * 100) % 2) == 0 ? 1 : -1);
    //     lastData = lastData.toFixed(1) - 0;

    //     secondData += Math.random() * ((Math.round(Math.random() * 100) % 2) == 0 ? 1 : -1);
    //     secondData = secondData.toFixed(1) - 0;

    //     axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
        
    //     // 动态数据接口 addData
    //     myChart.addData([
    //         [
    //             0,        // 系列索引
    //             lastData, // 新增数据
    //             false,    // 新增数据是否从队列头部插入
    //             false,    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
    //             axisData  // 坐标轴标签
    //         ],
    //         [
    //             1,        // 系列索引
    //             secondData, // 新增数据
    //             false,    // 新增数据是否从队列头部插入
    //             false,    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
    //             // axisData  // 坐标轴标签
    //         ]
    //     ]);
    // }, 2100);


    var myCharta = echarts.init(document.getElementById('move-echartsa')); 
        optiona = {
            title : {
                text: '用户终端类型',
                subtext: '测试数据',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['MAC','Android-Phone','Android-Pad','PC','IOS-Phone','IOS-Pad']
            },
            animate:true,
            series : [
                {
                    name: '终端类型',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'MAC'},
                        {value:310, name:'Android-Phone'},
                        {value:155, name:'Android-Pad'},
                        {value:234, name:'PC'},
                        {value:135, name:'IOS-Phone'},
                        {value:155, name:'IOS-Pad'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

    myCharta.setOption(optiona); 

var myChart = echarts.init(document.getElementById('move-echarts'));

        // 指定图表的配置项和数据
        option = {
    baseOption: {
      timeline: {
        itemStyle: {
          normal: {
            color: '#04a5f1'
          },
          emphasis: {
            color: '#04a5f1'
          }
        },
        lineStyle: {
          color: '#ddd'
        },
        checkpointStyle: {
          color: '#04a5f1',
          borderColor: 'rgba(4, 165, 261, .5)'
        },
        data: ['2017/01', '2017/02', '2017/03', '2017/04', '2017/05', '2017/06']
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      backgroundColor: '#fff',
      series: [{
        name: '库存情况',
        type: 'pie',
        radius: '68%',
        center: ['50%', '50%'],
        clockwise: false,

        label: {
          normal: {
            textStyle: {
              color: '#999',
              fontSize: '12',
              fontWeight: 'normal'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 4,
            borderColor: '#ffffff',
          },
          emphasis: {
            borderWidth: 0,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }],
      color: [
        '#00acee',
        '#52cdd5',
        '#79d9f1',
        '#a7e7ff',
        '#c8efff'
      ]
    },
    options: [{ // 这是'2017/01' 对应的 option
      title: {
        text: '部门1月份费用占比变化',

      },
      series: [{
        data: [{
          value: 45,
          name: 'CARD'
        }, {
          value: 25,
          name: 'SSD'
        }, {
          value: 15,
          name: 'U盘'
        }, {
          value: 8,
          name: '嵌入式'
        }, {
          value: 7,
          name: 'FLASH'
        }],
      }]
    }, { // 这是'2017/02' 对应的 option
      title: {
        text: '2017年1月份库存占比'
      },
      series: [{
        data: [{
          value: 12,
          name: 'CARD'
        }, {
          value: 35,
          name: 'SSD'
        }, {
          value: 18,
          name: 'U盘'
        }, {
          value: 18,
          name: '嵌入式'
        }, {
          value: 27,
          name: 'FLASH'
        }],
      }]
    }, { // 这是'2017/02' 对应的 option
      title: {
        text: '2017年1月份库存占比'
      },
      series: [{
        data: [{
          value: 17,
          name: 'CARD'
        }, {
          value: 23,
          name: 'SSD'
        }, {
          value: 12,
          name: 'U盘'
        }, {
          value: 28,
          name: '嵌入式'
        }, {
          value: 21,
          name: 'FLASH'
        }],
      }]
    }, { // 这是'2017/02' 对应的 option
      title: {
        text: '2017年1月份库存占比'
      },
      series: [{
        data: [{
          value: 14,
          name: 'CARD'
        }, {
          value: 35,
          name: 'SSD'
        }, {
          value: 58,
          name: 'U盘'
        }, {
          value: 13,
          name: '嵌入式'
        }, {
          value: 29,
          name: 'FLASH'
        }],
      }]
    }, { // 这是'2017/02' 对应的 option
      title: {
        text: '2017年1月份库存占比'
      },
      series: [{
        data: [{
          value: 12,
          name: 'CARD'
        }, {
          value: 33,
          name: 'SSD'
        }, {
          value: 11,
          name: 'U盘'
        }, {
          value: 18,
          name: '嵌入式'
        }, {
          value: 24,
          name: 'FLASH'
        }],
      }]
    }, { // 这是'2017/02' 对应的 option
      title: {
        text: '2017年1月份库存占比'
      },
      series: [{
        data: [{
          value: 18,
          name: 'CARD'
        }, {
          value: 35,
          name: 'SSD'
        }, {
          value: 14,
          name: 'U盘'
        }, {
          value: 18,
          name: '嵌入式'
        }, {
          value: 21,
          name: 'FLASH'
        }],
      }]
    }, ],
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
    </body>
</html>